import React from 'react';
import { connect } from 'dva';
import QueueAnim from 'rc-queue-anim';
import { Layout, Row, Col, Card, Spin, Menu, Dropdown, Icon, DatePicker, Badge, Tabs } from 'antd';
import PropTypes from 'prop-types';
import { CardMsg } from '../../components';
import styles from './PublicNumber.less';
import { LineChart, PieChart, MyChart, MyStep, CityChart } from '../../components';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import { wx, mytime } from '../../utils/config';

const { Header, Sider, Content } = Layout;
const day = new Date();
day.setTime(day.getTime() - 24 * 60 * 60 * 1000);
const lastday = `${day.getFullYear()}-${day.getMonth() + 1}-${day.getDate()}`;
const TabPane = Tabs.TabPane;
const arr = [];
for (const i in wx) {
  arr.push(wx[i]);
}
class PublicNumber extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      mykey: 'Happylife',
      title: '萌岛乐生活',
      visible: false,
      today: lastday,
    };
  }
  // 选择日期
  componentWillMount() {
    setInterval(() => {
      let mykey;
      let title;
      for (let i = 0; i < arr.length; i++) {
        let j = i + 1;
        if (i >= arr.length - 1) {
          j = 0;
        }
        switch (this.state.mykey) {
          case arr[i].type:
            mykey = arr[j].type;
            title = arr[j].name;
            break;
        }
      }
      this.setState({
        mykey,
        title,
      });
    }, mytime);
  }
  onChange = (date, dateString) => {
    this.props.dispatch(routerRedux.push({
      pathname: '/publicNumber',
      query: { dateString },
    }));
  }


	// 禁止日期
  disabledDate = (current) => {
		// Can not select days before today and today
    return current && current.valueOf() > Date.now() - 1000 * 60 * 60 * 24;
  }

  handleMenuClick = (e) => {
    let title;
    for (let i = 0; i < arr.length; i++) {
      switch (e.key) {
        case arr[i].type: title = arr[i].name;
          break;
      }
    }
    // switch (e.key) {
    //   case 'DimensionCode': title = '维码器商 户平台';
    //     break;
    //   case 'Happylife': title = '萌岛乐生活';
    //     break;
    //   case 'Union': title = '萌岛联萌';
    // }
    this.setState({
      mykey: e.key,
      title,
    });
  }
  handleVisibleChange = (flag) => {
    this.setState({ visible: flag });
  }

  render() {
    const {
			cardUsers,
			cardMsg,
			new_cancel_user_lineChart,
			read_user_lineChart,
			share_user_lineChart,
			Cancel_attention_sex_lineChart,
			follow_sex_lineChart,
			where_are_new_user_from,
			map,
			msg_count,
			materia,
			dispatch } = this.props[this.state.mykey];

    const title = this.state.title;
    const arr_menu = arr.map((item) => {
      return (
        <Menu.Item key={item.type} >{item.name}</Menu.Item>
      );
    });
    return (
      <div>
        <Layout>
          <Header className={styles.header}>

            <DatePicker
              className={styles.dateStyle}
              format="YYYY-MM-DD"
              onChange={this.onChange}
								// showToday={true}
              defaultValue={moment(this.state.today, 'YYYY-MM-DD')}
              disabledDate={() => this.disabledDate()}
            />


            <Menu
              className={styles.menu}
              onClick={this.handleMenuClick}
              mode="horizontal"
              defaultSelectedKeys={['1']}
              selectedKeys={[this.state.mykey]}
            >
              {arr_menu}
            </Menu>


          </Header>
          <Layout>

            <Row gutter={5}>
              <Col span={20}>
                <Content>
                  <Row type="flex" justify="start" gutter={2} style={{ marginBottom: 5, boxShadow: '1px 1px 1px #dddddd' }}>
                    <Col span={12}><Spin spinning={false}><CardMsg msg={cardUsers} title={'粉丝关键指数'} /></Spin></Col>
                    <Col span={12}><Spin spinning={false}><CardMsg msg={cardMsg} title={'消息关键指数'} /></Spin></Col>
                  </Row>

                  <Row type="flex" >
                    <Col span={8}>
                      <Spin spinning={false}> <div style={{ background: 'white' }}> <LineChart stys={{ width: 350, height: 190 }} msg={new_cancel_user_lineChart} title={'新增&取关趋势'} /></div></Spin>
                      <Spin spinning={false}> <div style={{ background: 'white' }}>
                        <LineChart stys={{ width: 350, height: 190 }} msg={read_user_lineChart} title={'图文阅读人数趋势'} /></div></Spin>
                      <Spin spinning={false}>
                        <div style={{ background: 'white' }}>
                          <LineChart stys={{ width: 350, height: 190 }} msg={share_user_lineChart} title={'图文分享人数趋势'} /></div></Spin>

                    </Col>
                    <Col span={8}>

                      <Spin spinning={false}>
                        <LineChart stys={{ width: 350, height: 190 }} msg={Cancel_attention_sex_lineChart} title={'取关男女比例趋势'} /></Spin>
                      {/* <Spin spinning={false}>   <MyChart title={"关键词次数"} msg={copyarr} /></Spin>*/}
                      <Spin spinning={false}>
                        <MyChart title={'地区比例分布'} msg={map} /></Spin>


                    </Col>
                    <Col span={8}>

                      <Spin spinning={false}><LineChart stys={{ width: 350, height: 190 }} msg={follow_sex_lineChart} title={'用户男女比例趋势'} /></Spin>
                      <Spin spinning={false}>
                        <PieChart msg={where_are_new_user_from} title={'用户关注来源'} /></Spin>
                      <Spin spinning={false}>
                        <MyChart title={'留言发送次数'} msg={msg_count} /></Spin>


                    </Col>

                  </Row>
                </Content>
              </Col>
              <Col span={4}>
                <Sider style={{ background: '#fff', width: '100%' }}><MyStep msg={materia} /></Sider>
              </Col>
            </Row>
          </Layout>
        </Layout>
      </div>
    );
      // <div>
      //   {
      //     <Layout style={{ paddingTop: '25px' }}>

      //       <div style={{ position: 'fixed', zIndex: '9999', top: '0px' }}>
      //         <Dropdown overlay={menu} trigger={['click']}>
      //           <a className="ant-dropdown-link" style={{ fontSize: '22px', display: 'inline-block', padding: '1px' }}>
      //             {title} <Icon type="down" />
      //           </a>
      //         </Dropdown>
      //         <DatePicker
      //           style={{ float: 'right', display: 'inline-block', marginTop: '5px', width: '100px', marginLeft: '5px' }}
      //           format="YYYY-MM-DD"
      //           onChange={this.onChange}
			// 					// showToday={true}
      //           defaultValue={moment(this.state.today, 'YYYY-MM-DD')}
      //           disabledDate={this.disabledDate}
      //         />

      //       </div>
      //       <Layout>

      //         <Row type="flex" justify="start">
      //           <Col span={12}><Spin spinning={false}><CardMsg msg={cardUsers} title={'粉丝关键指数'} /></Spin></Col>
      //           <Col span={12}><Spin spinning={false}><CardMsg msg={cardMsg} title={'消息关键指数'} /></Spin></Col>
      //         </Row>

      //         <Row type="flex" >
      //           <Col span={8}>
      //             <Spin spinning={false}> <div style={{ background: 'white' }}> <LineChart stys={{ width: 350, height: 205 }} msg={new_cancel_user_lineChart} title={'新增&取关趋势'} /></div></Spin>
      //             <Spin spinning={false}> <div style={{ background: 'white' }}>
      //               <LineChart stys={{ width: 350, height: 205 }} msg={read_user_lineChart} title={'图文阅读人数趋势'} /></div></Spin>
      //             <Spin spinning={false}>
      //               <div style={{ background: 'white' }}>
      //                 <LineChart stys={{ width: 350, height: 205 }} msg={share_user_lineChart} title={'图文分享人数趋势'} /></div></Spin>

      //           </Col>
      //           <Col span={8}>

      //             <Spin spinning={false}>
      //               <LineChart stys={{ width: 350, height: 205 }} msg={Cancel_attention_sex_lineChart} title={'取关男女比例趋势'} /></Spin>
      //             {/* <Spin spinning={false}>   <MyChart title={"关键词次数"} msg={copyarr} /></Spin>*/}
      //             <Spin spinning={false}>
      //               <MyChart title={'留言发送次数'} msg={msg_count} /></Spin>


      //           </Col>
      //           <Col span={8}>

      //             <Spin spinning={false}><LineChart stys={{ width: 350, height: 205 }} msg={follow_sex_lineChart} title={'用户男女比例趋势'} /></Spin>
      //             <Spin spinning={false}>
      //               <MyChart title={'地区比例分布'} msg={map} /></Spin>
      //             <Spin spinning={false}>
      //               <PieChart msg={where_are_new_user_from} title={'用户关注来源'} /></Spin>
      //           </Col>

      //         </Row>

      //       </Layout>
      //       <Sider style={{ background: 'none', minWidth: '300px', marginLeft: '10px' }}><MyStep msg={materia} /></Sider>
      //     </Layout>
			// 	}

      // </div>
  }
}


PublicNumber.propTypes = {
};


function mapStateToProps(state) {
	// const pathname = state.routing.locationBeforeTransitions.pathname.replace("/publicNumber/", "")
  const data = state.publicNumber;
  return { ...data };
}
export default connect(mapStateToProps)(PublicNumber);
